<template>
  <div class="hello">
    <headWrapper></headWrapper>
    <div class="container">
      <div class="contain wrap">
        <div class="head clearfix">
          <div class="text fl">
            <h2>
                <!-- <a class="select fr">点播</a> -->{{live.name}}
            </h2>
            <p><!-- 主办方：<a>美时美客</a> --><span class="time">时间：{{live.start_time}}</span></p>
          </div>
          <div class="tips fr">
            <p class="viewnum"><el-button type="primary" icon="el-icon-view" size="mini">{{live.view_num}}</el-button></p>
            <!-- <div class="opera">
              <a href="" class="report"><i class="el-icon-warning"></i> 举报</a>
              <el-button-group>
                <el-button type="danger" size="mini">关注</el-button>
                <el-button type="primary" size="mini">1</el-button>
              </el-button-group>
            </div> -->
          </div>
        </div>
        <div class="playbox">
          <div class="player">
            <video id="video" controls="controls" reload loop :src="videoUrl"></video>
            <!-- <div class="reward">
              <a><i class="el-icon-share"></i> 分享</a>
            </div> -->
          </div>
          <div class="comment">
            <ul class="list">
              <li v-for="(item,index) in comlist" v-if="item.module == 'text_comment'">
                <a class="headimg fl"><img :src="item.header"></a>
                <div class="msg">
                  <h4 class="username">{{item.nick}}</h4>
                  <h5 class="time">{{item.create_time}}</h5>
                  <p class="content">{{item.content}}</p>
                </div>
              </li>
            </ul>
            <!-- <div class="publish">
              <input type="text" placeholder="请输入内容" v-model="comment" class="input"><a>发送</a>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="explaner">
      <div class="explan wrap">
        <h4 class="title">说明</h4>
        <p>{{live.desc}}</p>
      </div>
    </div> -->
    <!-- <footWrapper></footWrapper> -->
  </div>
</template>

<script>
import vue from 'vue'
import headWrapper from './head.vue'
import footWrapper from './foot.vue'
export default {
  data () {
    return {
      comment: '',roomId:'',live:{},videoUrl:'',initData:{},fristMsgId:'',comlist:''
    }
  },
  components:{
    headWrapper,
    footWrapper
  },
  mounted(){
    this.roomId = this.search("ds_id");
    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        window.location.href = "http://ph.shikee.tv/?ds_id="+this.roomId;
    }
    this.getData();
    this.getComment();
    this.loop();
  },
  methods:{
    getData() {
      var that = this;
      this.axios.post(this.beseUrl+'/init/index/index','ds_id='+this.roomId).then(function(res){
        var direct = res.data.data.direct_seeding;
        var pull_url = res.data.data.pull_url;
        //that.$message(direct.name);
        if(res.data.code == '200'){
          that.live = direct;
          document.title = direct.name;
          if(direct.direct_status == "end") {
            that.videoUrl = direct.playback;
          } else {
            that.videoUrl = pull_url.m3u8_url;
          }
        }else{
          that.$message('加载失败');
        }
      }).catch(function(error){
        console.log(error)
      })
    },
    getComment(){
      var that = this;
      var option = 'ds_id='+this.roomId+'&page=1&nums=100&type=0&order=0';
        that.axios.post(that.beseUrl+'/comment/index/lists',option).then(function(res){
          if(res.data.code == 200){
            that.comlist = res.data.data;
          }
        })
    },
    loop(){
      var that = this;
      setInterval(function(){
        that.getComment()
      },5000)
    }
  }
}
</script>
<style scoped>
.container{
  background: #e8e9eb;
}
.contain{
  padding: 10px 0;
}
.head{
  padding: 30px 0;
}
.head h2{
  font-size: 24px;color: #000;line-height: 24px;display: inline-block;
}
.head .select{
  font-size: 12px;padding: 0px 5px;background: #ff8834;color: #fff;border-radius: 3px;line-height: 20px;margin: 2px 0 0 6px;
}
.text p{
  margin-top: 10px;
}
.text a{color: #1087dc;}
.tips{
  margin-top: -0px;
}
.viewnum{
  text-align: right;margin-bottom: 10px;
}
.report{
  margin-right: 10px;
}
.explaner{
  background: #fff;padding: 10px 0 30px;
}
.explan{
  border: 1px solid #e8e9eb;
}
.explan .title{
  padding:10px;font-size: 18px;border-bottom: 1px solid #e8e9eb;
}
.explan p{
  padding: 10px;line-height: 24px;
}
.playbox{
  display: flex;background: #2d2d2d;
}
.player{
  flex:4;
}
.reward{
  height: 46px;line-height: 46px;padding: 0 10px;background: #222222;
}
#video{width: 100%;height:100%;}
.comment{
  flex:1;position: relative;
  overflow: hidden;
  padding-bottom:48%;
}
.list{
  height:100%;overflow-y:scroll;position: absolute;width: 100%;
  top: 0;left: 0;box-sizing: border-box;
}
.list li{
  border-bottom:1px solid #484848;padding: 10px;
}
.list li:last-child{border: none;}
.list  .headimg{
  width: 36px;height: 36px;display: block;
  border-radius: 50%;overflow: hidden;
}
.list .msg{
  padding-left: 50px;line-height: 18px;
}
.list .username .list .time{
  color: #6f6e6e;
}
.list .time{
  font-size: 12px;
}
.list .content{
  color: #bcbcbc;padding: 10px 0;
}
.publish{
  position: absolute;background: #2d2d2d;line-height: 36px;
  bottom: 0;left: 0;padding:2%;width: 96%;border-top: 1px solid #4a4a4a;
}
.input{
  height: 32px;border:none;background: #545454;color: #aaaa97;padding: 0 5px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;width: 80%;box-sizing: border-box;
}
.input:focus{outline:none}
.publish a{
  display: inline-block;height: 32px;background: #999;color: #ccc;border-top-right-radius: 5px;border-bottom-right-radius: 5px;width: 20%;text-align: center;
  margin-left: -2px;vertical-align: middle;
}
.publish a:active{
  background: #8b8989;
}
</style>
